<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket Chat</title>
        <script type="text/javascript" src="json2.js"></script>
        <script type='text/javascript'>
            if (!window.WebSocket)
                alert("WebSocket not supported by this browser");
   
            function $() { return document.getElementById(arguments[0]); }
            function $F() { return document.getElementById(arguments[0]).value; }
      
            function getKeyCode(ev) { if (window.event) return window.event.keyCode; return ev.keyCode; } 
      
            alert("3$('join') = "+$('join'));
            var room = {
                join: function(name) {
                    this._username=name;
                    //var location = document.location.toString().replace('http://','ws://').replace('https://','wss://');
                    var location = "ws://localhost:8088/WebSocket/websocket";
                    this._ws=new WebSocket(location);
                    this._ws.onopen=this._onopen;
                    this._ws.onmessage=this._onmessage;
                    this._ws.onclose=this._onclose;
                },
        
                _onopen: function(){
                    $('join').className='hidden';
                    $('joined').className='';
                    $('phrase').focus();
                    room._send(room._username,'has joined!');
                },
        
                _send: function(user,message){
                    user=user.replace(':','_');
                    if (this._ws)
                        this._ws.send(user+':'+message);
                },
      
                chat: function(text) {
                    if (text != null && text.length>0 )
                        room._send(room._username,text);
                },
        
                _onmessage: function(m) {
                    if (m.data){
                        var c=m.data.indexOf(':');
                        var from=m.data.substring(0,c).replace('<','&lt;').replace('>','&gt;');
                        var text=m.data.substring(c+1).replace('<','&lt;').replace('>','&gt;');
            
                        var chat=$('chat');
                        var spanFrom = document.createElement('span');
                        spanFrom.className='from';
                        spanFrom.innerHTML=from+':&nbsp;';
                        var spanText = document.createElement('span');
                        spanText.className='text';
                        spanText.innerHTML=text;
                        var lineBreak = document.createElement('br');
                        chat.appendChild(spanFrom);
                        chat.appendChild(spanText);
                        chat.appendChild(lineBreak);
                        chat.scrollTop = chat.scrollHeight - chat.clientHeight;   
                    }
                },
        
                _onclose: function(m) {
                    this._ws=null;
                    $('join').className='';
                    $('joined').className='hidden';
                    $('username').focus();
                    $('chat').innerHTML='';
                }
        
            };
      
        </script>
        <style type='text/css'>
            div { border: 0px solid black; }
            div#chat { clear: both; width: 40em; height: 20ex; overflow: auto; background-color: #f0f0f0; padding: 4px; border: 1px solid black; }
            div#input { clear: both; width: 40em; padding: 4px; background-color: #e0e0e0; border: 1px solid black; border-top: 0px }
            input#phrase { width:30em; background-color: #e0f0f0; }
            input#username { width:14em; background-color: #e0f0f0; }
            div.hidden { display: none; }
            span.from { font-weight: bold; }
            span.alert { font-style: italic; }
        </style>
    </head><body>
        <div id='chat'></div>
        <div id='input'>
            <div id='join' >
                Username:&nbsp;
                <input id='username' type='text'/>
                <input id='joinB' class='button' type='submit' name='join' value='Join'/>
            </div>
            <div id='joined' class='hidden'>
                Chat:&nbsp;
                <input id='phrase' type='text'/>
                <input id='sendB' class='button' type='submit' name='join' value='Send'/>
            </div>
        </div>
        <script type='text/javascript'>
            $('username').setAttribute('autocomplete','OFF');
            $('username').onkeyup = function(ev) { 
                var keyc=getKeyCode(ev); 
                if (keyc==13 || keyc==10) { 
                    room.join($F('username')); 
                    return false; 
                } 
                return true; 
            } ;        
            $('joinB').onclick = function(event) { 
                room.join($F('username')); 
                return false; 
            };
            $('phrase').setAttribute('autocomplete','OFF');
            $('phrase').onkeyup = function(ev) {   
                var keyc=getKeyCode(ev); 
                if (keyc==13 || keyc==10) { 
                    room.chat($F('phrase')); 
                    $('phrase').value=''; 
                    return false; 
                } 
                return true; 
            };
            $('sendB').onclick = function(event) { 
                room.chat($F('phrase')); 
                $('phrase').value=''; 
                return false; 
            };
        </script>

        <p>
            This is a demonstration of the Jetty websocket server.
        </p>
    </body>
</html>